<label class="item-label">{$field.title|htmlspecialchars}
    {if condition="$field['subtitle']"}
        <span class="check-tips">（{$field.subtitle}）</span>
    {/if}
</label>
{if condition="$field['name'] == 'action'"}
    <p style="color: #f00;">{:lang("_DEVELOPMENT_STAFF_ATTENTION_")}{:lang("_YOU_USE_A_FIELD_NAMED_ACTION_")}，{:lang("_BECAUSE_THIS_FIELD_NAME_WILL_BE_WITH_FORM_")}[action]{:lang("_CONFLICT_WHICH_CAUSES_THE_FORM_TO_BE_UNABLE_TO_COMMIT_PLEASE_USE_ANOTHER_NAME_")}</p>
{/if}
<div class="controls ">
{switch name="field.type"}
    {case value="text"}
        <input type="text" name="{$field.name}" value="{$field.value|htmlspecialchars}"
               class="text input-large form-control" style="width: 400px"/>
    {/case}
    {case value="password"}
    <input type="password" name="{$field.name}" value="{$field.value}" autocomplete="off"
           class="text input-large form-control" style="width: 400px"/>
    {/case}
    {case value="label"}
        {$field.value}
    {/case}


    {case value="hidden"}
        <input type="hidden" name="{$field.name}" value="{$field.value}" class="text input-large"/>
    {/case}
    {case value="readonly"}
        <input type="hidden" name="{$field.name}" value="{$field.value}" class="text input-large form-control"
               style="width: 400px" placeholder={:lang("_NO_NEED_TO_FILL_IN_WITH_DOUBLE_")} readonly/>
        <p class="lead" >{$field.value}</p>
    {/case}
    {case value="area_readonly"}
        <p class="lead" >{$field.value}</p>
    {/case}
    {case value="integer"}
        <input type="text" name="{$field.name}" value="{$field.value}" class="text input-large form-control"
               style="width: 400px"/>
    {/case}
    {case value="uid"}
        <input type="text" name="{$field.name}" value="{$field.value}" class="text input-large form-control"
               style="width: 100px"/>
    {/case}
    {case value="select"}
        <select name="{$field.name}" class="form-control" style="width:auto;">
            {volist name="field.opt" id="option"}
                {php}
                    $selected = $field['value']==$key ? 'selected' : '';
                {/php}
                <option value="{$key}"
                {$selected}>{$option|htmlspecialchars}</option>
            {/volist}
        </select>
    {/case}
    {case value="colorPicker"}
        {php}
            $colorPicker = 1;
        {/php}
        <div class="color-picker" style="width:100px;height: 30px;">
            <input type="text" name="{$field.name}" class="simple_color_callback form-control" onchange="setColorPicker(this);" value="{$field.value|default=''}" style="width: 100px;"/>
        </div>
    {/case}
    {case value="radio"}
        {volist name="field.opt" id="option"}
            {php}
                $checked = $field['value']==$key ? 'checked' : '';
                $inputId = "id_$field[name]_$key";
            {/php}
            <label for="{$inputId}"> <input id="{$inputId}" name="{$field.name}" value="{$key}" type="radio"
                {$checked}/>
                {$option}</label> &nbsp;&nbsp;&nbsp;&nbsp;
        {/volist}
    {/case}
    {case value="icon"}
        <div class='icon-chose' title={:lang("_SELECT_ICON_WITH_DOUBLE_")} style="width: 400px;">
            <select name="{$field.name}" title={:lang("_SELECT_ICON_WITH_DOUBLE_")} class="chosen-icons" data-value="{$field.value|default='icon-star'}"></select>
        </div>
        {php}
            if(!$have_icon){
            $have_icon=1;
        {/php}
        {load href="/zui/lib/chosen/chosen.icons.min.js" /}
        {load href="/zui/lib/chosen/chosen.icons.css" /}
        {php}}{/php}
        <script>
            $(function(){
                $('.chosen-container').remove()
                $('form select.chosen-icons').attr('class','chosen-icons');
                $('form select.chosen-icons').data('zui.chosenIcons',null);
                $('form select.chosen-icons').data('chosen',null);
                $('form select.chosen-icons').chosenIcons();
            });
        </script>
    {/case}

    {case value="singleFile"}
        {:widget('Common/UploadFile/render',array(array('name'=>$field['name'],'value'=>$field['value'])))}
    {/case}
    {case value="multiFile"}
        {:widget('Common/UploadMultiFile/render',array(array('name'=>$field['name'],'limit'=>9,'value'=>$field['value'])))}
    {/case}
    {case value="singleImage"}
        <div class="controls">
            <div id="upload_single_image_{$field.name}" style="padding-bottom: 5px;">{:lang("_SELECT_PICTURES_")}</div>
            <input class="attach" type="hidden" name="{$field.name}" value="{$field['value']}"/>
            <div class="upload-img-box">
                <div class="upload-pre-item popup-gallery">

                {notempty name="field.value"}
                    <div class="each">
                    <a href="{$field.value|get_cover='path'}" title={:lang("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}>
                        <img src="{$field.value|get_cover='path'}">
                    </a>
                        <div class="text-center opacity del_btn" ></div>
                        <div onclick="admin_image.removeImage($(this),'{$field.value}')"  class="text-center del_btn">{:lang("_DELETE_")}</div>
                    </div>
                {/notempty}
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var uploader_{$field.name}= WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: 'Uploader.swf',
                    // 文件接收服务端。
                    server: "{:url('File/uploadPicture',array('session_id'=>session_id()))}",
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#upload_single_image_{$field.name}',
                    // 只允许选择图片文件
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                uploader_{$field.name}.on('fileQueued', function (file) {
                    uploader_{$field.name}.upload();
                });
                /*上传成功**/
                uploader_{$field.name}.on('uploadSuccess', function (file, data) {
                    if (data.status) {
                        $("[name='{$field.name}']").val(data.id);
                        $("[name='{$field.name}']").parent().find('.upload-pre-item').html(
                                ' <div class="each"><a href="'+ data.path+'" title={:lang("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}><img src="'+ data.path+'"></a><div class="text-center opacity del_btn" ></div>' +
                                        '<div onclick="admin_image.removeImage($(this),'+data.id+')"  class="text-center del_btn">{:lang("_DELETE_")}</div></div>'
                        );
                        uploader_{$field.name}.reset();
                    } else {
                        updateAlert(data.info);
                        setTimeout(function () {
                            $('#top-alert').find('button').click();
                            $(that).removeClass('disabled').prop('disabled', false);
                        }, 1500);
                    }
                });
            })
        </script>

    {/case}

    {case value="multiImage"}
        <div class="controls multiImage">
            <div id="upload_multi_image_{$field.name}" style="padding-bottom: 5px;">{:lang("_SELECT_PICTURES_")}</div>
            <input class="attach" type="hidden" name="{$field.name}" value="{$field['value']}"/>
            <div class="upload-img-box">
                <div class="upload-pre-item popup-gallery">

                    {notempty name="field.value"}
                        {php}$aIds = explode(',',$field['value']);{/php}
                        {volist name="aIds" id="aId"}
                            <div class="each">
                                <a href="{$aId|get_cover='path'}" title={:lang("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}>
                                    <img src="{$aId|get_cover='path'}">
                                </a>
                                <div class="text-center opacity del_btn" ></div>
                                <div onclick="admin_image.removeImage($(this),'{$aId}')"  class="text-center del_btn">{:lang("_DELETE_")}</div>
                            </div>
                        {/volist}


                    {/notempty}
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var id = "#upload_multi_image_{$field.name}";
                var limit = parseInt('{$field.opt}');
                var uploader_{$field.name}= WebUploader.create({
                    // 选完文件后，是否自动上传。
                      // sw{:lang("_F_FILE_PATH_")}
                    swf: 'Uploader.swf',
                    // 文件接收服务端。
                    server: "{:url('File/uploadPicture',array('session_id'=>session_id()))}",
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，{:lang("_AND_IT_COULD_BE_FLASH_")}.
                    //pick: '#upload_multi_image_{$field.name}',
                    pick: {'id': id, 'multi': true},
                    fileNumLimit: limit,
                    // 只允许{:lang("_SELECT_PICTURES_")}文件。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                uploader_{$field.name}.on('fileQueued', function (file) {
                    uploader_{$field.name}.upload();
                });
                uploader_{$field.name}.on('uploadFinished', function (file) {
                    uploader_{$field.name}.reset();
                });
                /*上传成功**/
                uploader_{$field.name}.on('uploadSuccess', function (file, data) {
                          if (data.status) {
                            var ids = $("[name='{$field.name}']").val();
                            ids = ids.split(',');
                          if( ids.indexOf(data.id) == -1){
                                var rids = admin_image.upAttachVal('add',data.id, $("[name='{$field.name}']"));
                              if(rids.length>limit){
                                  updateAlert({:lang('_EXCEED_THE_PICTURE_LIMIT_WITH_SINGLE_')});
                                  return;
                              }
                              $("[name='{$field.name}']").parent().find('.upload-pre-item').append(
                                        ' <div class="each"><a href="'+ data.path+'" title={:lang("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}><img src="'+ data.path+'"></a><div class="text-center opacity del_btn" ></div>' +
                                                '<div onclick="admin_image.removeImage($(this),'+data.id+')"  class="text-center del_btn">{:lang("_DELETE_")}</div></div>'
                                );
                            }else{
                                updateAlert({:lang('_THE_PICTURE_ALREADY_EXISTS_WITH_SINGLE_')});
                            }
                        } else {
                            updateAlert(data.info);
                            setTimeout(function () {
                                $('#top-alert').find('button').click();
                                $(that).removeClass('disabled').prop('disabled', false);
                            }, 1500);
                        }
                });
            })
        </script>

    {/case}

    {case value="checkbox"}
        {php}
            $importCheckBox = true;
        {/php}
        {php}
            $field['value_array'] = explode(',', $field['value']);
        {/php}
        {volist name="field.opt" id="option"}
            {php}
                $checked = in_array($key,$field['value_array']) ? 'checked' : '';
                $inputId = "id_$field[name]_$key";
            {/php}
            <label for="{$inputId}"> <input type="checkbox" value="{$key}" id="{$inputId}" class="oneplus-checkbox"
                                            data-field-name="{$field.name}" {$checked}/>
                {$option}</label>

        {/volist}
        <input type="hidden" name="{$field.name}" class="oneplus-checkbox-hidden"
               data-field-name="{$field.name}" value="{$field.value}"/>

    {/case}
    {case value="editor"}
            {:widget('Common/Ueditor/editor',array($field['name'],$field['name'],$field['value'],$field['style']['width'],$field['style']['height'],$field['config']))}

    {/case}
    {case value="textarea"}
        <textarea name="{$field.name}" class="text input-large form-control"
                  style="height: 8em;width: 400px;height: 200px">{$field.value|htmlspecialchars}</textarea>
    {/case}
    {case value="time"}
        {php}
            $importDatetimePicker = true;
            //默认为当前时间
            if(!$field['value']){
            $field['value'] = time();
            }
        {/php}
        <input type="hidden" name="{$field.name}" value="{$field.value}"/>
        <div class="input-group date">
            <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </div>
            <input type="text" data-field-name="{$field.name}" class="text input-large form-time time form-control pull-left"
                   style="width: 282px" value="{$field.value|time_format='H:i'}" placeholder={:lang("_PLEASE_CHOOSE_TIME_WITH_DOUBLE_")}/>
        </div>
    {/case}
    {case value="date"}
        {php}
            $importDatetimePicker = true;
            //默认为当前时间
            if(!$field['value']){
            $field['value'] = time();
            }
        {/php}

        <input type="hidden" name="{$field.name}" value="{$field.value}"/>
        <div class="input-group date">
            <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </div>
            <input type="text" data-field-name="{$field.name}" class="text input-large form-date time form-control pull-left"
                   style="width: 282px" value="{$field.value|time_format='Y-m-d'}" placeholder={:lang("_PLEASE_CHOOSE_TIME_WITH_DOUBLE_")}/>
        </div>
    {/case}
    {case value="datetime"}
        {php}
            $importDatetimePicker = true;
            //默认为当前时间
            if(!$field['value']){
            $field['value'] = time();
            }
        {/php}
        <input type="hidden" name="{$field.name}" value="{$field.value}"/>
        <div class="input-group date">
            <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </div>
            <input type="text" data-field-name="{$field.name}" class="text form-datetime time form-control pull-left"
                   style="width: 282px" value="{$field.value|time_format}" placeholder={:lang("_PLEASE_CHOOSE_TIME_WITH_DOUBLE_")}/>
        </div>
    {/case}

    <!--添加城市选择（需安装城市联动插件,css样式不好处理排版有点怪）-->
    {case value="city"}
            <style type="text/css">
    			.form-control {
				display:inline-block;
				width: 120px;
				}
			</style>
            <!--修正在编辑信息时无法正常显示已经保存的地区信息-->
            {:hook('J_China_City',array('province'=>$field['value']['0'],'city'=>$field['value']['1'],'district'=>$field['value']['2'],'community'=>$field['value']['3']))}
    {/case}

    <!--弹出窗口选择并返回值（目前只支持返回ID）开始->
    {case value="dataselect"}
        <input type="text" name="{$field.name}" id="{$field.name}" value="{$field.value|htmlspecialchars}"
               class="text input-large form-control" style="width: 400px;display:inline-block;"/><input class="btn" style="margin-left:10px" type="button" value={:lang("_CHOICE_WITH_DOUBLE_")} onclick="openwin('{$field.opt}','600','500')">
			     <script type="text/javascript">
						//弹出窗口
						function openwin(url,width,height){
						    var l=window.screen.width ;
						    var w= window.screen.height;
						    var al=(l-width)/2;
						    var aw=(w-height)/2;
						    var OpenWindow=window.open(url,{:lang("_POP_UP_WINDOW_WITH_DOUBLE_")},"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");
						    OpenWindow.focus();
						if(OpenWindow!=null){ //弹出窗口关闭事件
						//if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload",   quickOut);
						if(window.attachEvent) OpenWindow.attachEvent("onunload",   quickOut);
						}
						}
						//关闭触发方法
						function quickOut()
						{
						alert({:lang("_THE_WINDOW_IS_CLOSED_WITH_DOUBLE_")});
						}
				 </script>
    {/case}
	<!--弹出窗口选择并返回值（目前只支持返回ID）结束 -->

    {case value="nestable"}
        {php}$has_nestable=1;{/php}
        <input type="hidden" name="{$field.name}" value='{:json_encode($field["value"])}'/>
        <div class="nestables nestable-group" data-name="{$field.name}">
            {php}foreach($field['value'] as $key =>$nestable){{/php}
            <div class="portlet light bordered" data-id="{$nestable['data-id']}" data-title="{$nestable['title']}" style="float:left;margin-right:10px;width: {$nestable['width']|default=300}px;">
                <div class="portlet-title">
                    <div class="caption">
                        <span class="caption-subject font-green sbold uppercase"><strong>{$nestable['title']}</strong></span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="dd nestable_list_one" id="nestable_list_{$key+1}">
                        {notEmpty name="nestable.items"}
                            <ol class="dd-list">
                                {volist name="nestable.items" id="vo"}
                                    <li class="dd-item" data-id="{$vo['data-id']}" data-title="{$vo.title}">
                                        <div class="dd-handle"> {$vo.title} </div>
                                    </li>
                                {/volist}
                            </ol>
                            {else/}
                            <div class="dd-empty"></div>
                        {/notEmpty}
                    </div>
                </div>
            </div>
            {php}}{/php}
            <div class="clearfix"></div>
        </div>
    {/case}
    {case value="chosen"}
        {php}$chosen_select2=true;{/php}
        <select name="{$field.name}[]" class="form-control select2 select2-hidden-accessible" multiple="" data-placeholder="{$field.title}" style="width: 400px" tabindex="-1" aria-hidden="true">
            {php}
                if( key($field['opt']) === 0){
            {/php}
            {volist name="field['opt']" id="option"}
                {php}
                    $selected = in_array(reset($option),(array)$field['value'])? 'selected' : '';
                {/php}
                <option value="{:reset($option)}" {$selected}>{$option|end|htmlspecialchars}</option>
            {/volist}
            {php}
                }else{
                foreach($field['opt'] as $optgroupkey =>$optgroup){
            {/php}
            <optgroup label="{$optgroupkey}">
                {volist name="optgroup" id="option"}
                    {php}
                        $selected = in_array(reset($option),(array)$field['value'])? 'selected' : '';
                    {/php}
                    <option value="{:reset($option)}" {$selected}>{$option|end|htmlspecialchars}</option>
                {/volist}
            </optgroup>
            {php}
                }
                }
            {/php}
        </select>
    {/case}
    {case value="multiInput"}
        <div class="clearfix" style="{$field['style']}">
        {php}
            $field['name'] = is_array($field['name'])?$field['name']:explode('|',$field['name']);
            foreach($field['name'] as $key=>$val){
        {/php}
        {switch name="field['config'][$key]['type']"}
            {case value="text"}
                <input type="text" name="{$val}" value="{$field['value'][$key]|htmlspecialchars}"
                       class=" pull-left text form-control" style="{$field['config'][$key]['style']}" placeholder="{$field['config'][$key]['placeholder']}"/>
            {/case}
            {case value="select"}
                <select name="{$val}" class="pull-left form-control" style="{$field['config'][$key]['style']}" >
                    {php}foreach($field['config'][$key]['opt'] as $key_opt =>$option){{/php}
                    {php}
                        $selected = $field['value'][$key]==$key_opt ? 'selected' : '';
                    {/php}
                    <option value="{$key_opt}"{$selected}>{$option|htmlspecialchars}</option>
                    {php}}{/php}
                </select>
            {/case}
        {/switch}
        {php}
            }
        {/php}
        </div>
    {/case}
    {case value="autoComplete"}
        {php}
            $delimiter = $field['opt']['delimiter']?$field['opt']['delimiter']:',';
        {/php}

        <input type="text" name="{$field.name}" value="{$field.value|htmlspecialchars}"
               class="text input-large form-control" style="width: 400px"/>

        {load href="/js/ext/tokeninput/jquery.tokeninput.js" /}
        {load href="/js/ext/tokeninput/token-input-facebook.css" /}

        <script>
            $(function () {
                $('[name="{$field.name}"]').tokenInput("{$field['opt']['url']}", {
                    theme: "facebook",
                    preventDuplicates: true,
                    tokenDelimiter: "{$delimiter}",
                    value: '{$field.value|htmlspecialchars}'
                });
            });
        </script>
    {/case}
    {case value="userDefined"}
        {$field.definedHtml}
    {/case}
    {default/}
    <span style="color: #f00;">{:lang("_ERROR_")}{:lang("_COLON_")}{:lang("_UNKNOWN_FIELD_TYPE_")}{$field.type}</span>
    <input type="hidden" name="{$field.name}" value="{$field.value|htmlspecialchars}"/>
{/switch}
</div>